<template>
    <div style="padding:1rem">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0">
            <el-form :inline="true" :model="filters">
                <el-form-item label="客户手机号:">
                    <el-input
                        v-model="filters.mobile"
                        placeholder="客户手机号"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="订单编号:">
                    <el-input
                        v-model="filters.orderId"
                        placeholder="订单编号"
                        icon="circle-close"
                        :on-icon-click="handleOrderIconClick"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="快递单号:">
                    <el-input
                        v-model="filters.logisticsNumber"
                        placeholder="快递单号"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="商城子编号:">
                    <el-input
                        v-model="filters.subOrderId"
                        placeholder="商城子编号"
                        icon="circle-close"
                        :on-icon-click="handleOrderIconClick"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="收货人姓名:">
                    <el-input
                        v-model="filters.acceptName"
                        placeholder="收货人姓名"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>

                <el-form-item label="详情地址长度:" v-if="statusInfo == 1">
                    <el-select v-model="filters.detailedAddressLength" placeholder="请选择" @change="search">
                        <el-option v-for="item in lenght" :key="item.id" :label="item.label"
                                   :value="item.value">{{item.label }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态:">
                    <el-select v-model="filters.orderDealStatus" placeholder="请选择" @change="search">
                        <el-option v-for="item in orderDealStatus" :key="item.id" :label="item.label"
                                   :value="item.value">{{
                            item.label }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间:">
                    <el-date-picker
                        v-model="filters.startTime"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    />
                    -
                    <el-date-picker
                        v-model="filters.endTime"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                </el-form-item>
                <br>
<!--                <el-form-item>-->
<!--                    <el-upload-->
<!--                        class="upload-demo"-->
<!--                        action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                        :show-file-list="false"-->
<!--                        multiple-->
<!--                        :http-request="orderIn"-->
<!--                        :file-list="fileIn"-->
<!--                    >-->
<!--                        <el-button type="primary" icon="el-icon-upload2">导入申报信息</el-button>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-download" @click="orderOut()">订单导出</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table
            v-loading="listLoading"
            :data="list"
            align="center"
            class="orderList"
            size="small"
            width="100%"
            style="margin-top: 1rem"
            tooltip-effect="dark"
            border
        >
            <el-table-column
                type="index"
                width="50" label="序号">
            </el-table-column>
            <el-table-column prop="orderId" label="订单编号" width="130"/>
            <el-table-column prop="subOrderId" label="商城子编号" width="150"/>
            <el-table-column prop="mobile" label="客户手机号" width="110"/>
            <el-table-column prop="logisticsCompany" label="配送方式" width="100"/>
            <el-table-column prop="logisticsNumber" label="快递单号" width="150"/>
            <el-table-column prop="address" label="配送地址" width="100"/>
            <el-table-column prop="acceptName" label="收货人姓名" width="100"/>
            <el-table-column prop="mobile" label="收货人手机号" width="130"/>
            <el-table-column prop="productAbbreviat" label="商品"/>
            <el-table-column prop="price" label="商品金额" width="100"/>
            <el-table-column prop="sumPrice" label="订单总积分" width="100"/>

            <el-table-column prop="sumAmount" label="订单金额" width="100"/>
            <el-table-column prop="detailedAddress" label="详细地址" width="80"/>
            <el-table-column prop="placeTime" label="下单时间" width="140"/>
            <el-table-column prop="statusName" label="订单状态" width="80"/>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top" style="text-align: center">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            @click="handleSome(scope.$index,scope.row)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-bottom: 2rem;">
            <el-col :span="12" class="toolbar">
                <el-pagination
                    :page-sizes="[10,20, 50, 100]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :offset="6" :span="3" style="margin-top: 1rem;line-height: 32px;">
                总积分：<span style="color: red">{{orderSums}}</span>
            </el-col>
            <el-col :span="3" style="margin-top: 1rem;line-height: 32px">
                总金额：<span style="color: red">{{orderSum}}</span> 元
            </el-col>
        </el-row>
        <!--    编辑模态框-->
        <el-dialog
            width="40%"
            :close-on-click-modal="false"
            title="编辑信息"
            center
            :visible.sync="dialogFormVisibleEdit"
            @close="closeDialog('editForm')"
        >
            <el-form ref="editForm" :model="editForm" :rules="editRule" label-width="100px" class="demo-ruleForm">
                <el-form-item label="收货人手机号:" prop="acceptMobile" :label-width="formLabelWidth">
                    <el-input v-model="editForm.acceptMobile"/>
                </el-form-item>
                <el-form-item label="收货人姓名:" prop="acceptName" :label-width="formLabelWidth">
                    <el-input v-model="editForm.acceptName"/>
                </el-form-item>
                <el-form-item label="快递单号:" prop="logisticsNumber" :label-width="formLabelWidth">
                    <el-input v-model="editForm.logisticsNumber"/>
                </el-form-item>
                <el-form-item label="配送方式:" prop="logisticsCompany" :label-width="formLabelWidth">
                    <el-input v-model="editForm.logisticsCompany"/>
                </el-form-item>
                <el-form-item label="配送地址:" prop="address" :label-width="formLabelWidth">
                    <el-input v-model="editForm.address"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditGoods('editForm')">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import NProgress from 'nprogress'
    import {formatDateTime} from '../../utils/index'
    import moment from 'moment'
    import {
        unOrderList,
        sameCheck,
        unclearOrderList,
        unOrderOut,
        orderInExcel,
        updateOrder,
    } from '../../api/modeList'
    // <!--待发货订单-->
    export default {
        name: "waitInfo",
        data() {
            var validatePass = (rule, value, callback) => {
                // 验证号码1，2
                // 手机号正则表达式
                const reg = /^1[3456789]\d{9}$/
                if (value === '') {
                    callback(new Error('号码不能为空'))
                } else if (!reg.test(value)) {
                    // 如果不符合手机号
                    callback(
                        new Error(
                            '请输入正确的手机号码'
                        )
                    )
                } else {
                    callback()
                }
            };
            return {
                filters: {
                    mobile: null,
                    orderId: null,   //订单编号
                    subOrderId: null,  //商城子编号
                    orderDealStatus: null,
                    startTime: null,
                    endTime: null,
                    logisticsNumber: null,
                    acceptName: null,
                    detailedAddressLength: null,
                },
                lenght: [
                    {
                        value: null,
                        label: '请选择'
                    },
                    {
                        value: 1,
                        label: '1'
                    },
                    {
                        value: 2,
                        label: '2'
                    },
                    {
                        value: 3,
                        label: '3'
                    },
                    {
                        value: 4,
                        label: '4'
                    },
                    {
                        value: 5,
                        label: '5'
                    },
                    {
                        value: 6,
                        label: '6'
                    },
                    {
                        value: 7,
                        label: '7'
                    },
                    {
                        value: 8,
                        label: '8'
                    },
                    {
                        value: 9,
                        label: '9'
                    },
                    {
                        value: 10,
                        label: '10'
                    },
                    {
                        value: 11,
                        label: '10以上'
                    },
                ],
                statusInfo: 0,
                orderDealStatus: [
                    {
                        value: null,
                        label: '全部'
                    },
                    {
                        value: 0,
                        label: '未发货'
                    }, {
                        value: 1,
                        label: '已发货'
                    },
                ],
                list: [],
                listLoading: false,
                total: 0,
                size: 10,
                pageNo: 1,
                orderSum: 0,
                orderSums: 0,
                restaurants: [],

                fileIn: [], // 导入

                formLabelWidth: '120px',
                dialogFormVisibleEdit: false,
                editForm: {
                    orderId: '',
                    acceptMobile: '',
                    acceptName: '',
                    address: '',
                    logisticsNumber: '',
                    logisticsCompany: '',
                    placeTime: ''
                },
                editRule: {
                    acceptMobile: [
                        {required: true, message: '请输入收货人手机号'},
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    acceptName: [
                        {required: true, message: '请输入收货人姓名', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入配送地址', trigger: 'blur'}
                    ],
                    // logisticsNumber: [
                    //     {required: true, message: '请输入快递单号', trigger: 'blur'}
                    // ],
                    // logisticsCompany: [
                    //     {required: true, message: '请输入配送方式', trigger: 'blur'}
                    // ],
                }
            }
        },
        mounted() {
            this.statusInfo = sessionStorage.getItem('statusInfo');
            this.getList()
        },
        methods: {
            search() {
                //搜索 根据当前后台的逻辑搜索的时候永远将页码置于1
                this.pageNo = 1;
                this.getList();
            },
            // querySearchAsync(queryString, cb) {
            //     let param = {
            //         username: this.filters.username
            //     };
            //     unclearOrderList(param).then((res) => {
            //         if (res.data.code === 0) {
            //             this.restaurants = res.data.Data;
            //             this.restaurants.map((val) => {
            //                 val.value = val.username
            //             });
            //             clearTimeout(this.timeout);
            //             this.timeout = setTimeout(() => {
            //                 cb(this.restaurants);
            //             }, 1000 * Math.random());
            //         } else {
            //             this.$message({
            //                 type: 'error',
            //                 message: res.data.msg,
            //                 duration: 1000
            //             })
            //         }
            //     })
            //
            // },
            handleSelect(item) {
                console.log(item)
            },
            getList() {
                if (this.filters.startTime != null) {
                    this.filters.startTime = moment(this.filters.startTime).format('YYYY-MM-DD 00:00:00')
                }
                if (this.filters.endTime != null) {
                    this.filters.endTime = moment(this.filters.endTime).format('YYYY-MM-DD 23:59:59')
                }
                const param = {
                    currPage: this.pageNo,
                    pageSize: this.size,
                    mobile: this.filters.mobile,
                    consignmentStatus: this.filters.orderDealStatus,
                    orderId: this.filters.orderId,
                    subOrderId: this.filters.subOrderId,
                    startTime: this.filters.startTime,
                    endTime: this.filters.endTime,
                    acceptName: this.filters.acceptName,
                    logisticsNumber: this.filters.logisticsNumber,
                    detailedAddressLength: this.filters.detailedAddressLength,
                };
                NProgress.start();
                this.listLoading = true;
                unOrderList(param).then((res) => {   //未核销订单列表
                    if (res.data.code === 0) {
                        let data = res.data.Data;
                        this.orderSum = data.orderSum;
                        this.orderSums = (data.orderSum) * 100;
                        this.list = data.page.records;
                        this.size = data.page.size;
                        this.total = data.page.total;
                        //this.pageNo = data.current;
                        const len = this.list.length;
                        if (len === 0 && this.pageNo > 1) {
                            this.pageNo -= 1;
                            this.getList()
                        }
                        this.list.map(val => {
                            switch (val.consignmentStatus) {
                                case 0:
                                    val.statusName = '未发货';
                                    break;
                                case 1:
                                    val.statusName = '已发货';
                                    break;
                                case 2:
                                    val.statusName = '退货中';
                                    break;
                                case 3:
                                    val.statusName = '已退货';
                                    break
                            }
                            val.sumPrice = (val.sumAmount) * 100;
                            let placeTime = new Date(val.placeTime);
                            val.placeTime = formatDateTime(placeTime);
                        });
                    } else {
                        this.total = 0;
                        this.list = [];
                        this.$message({
                            type: 'error',
                            message: res.data.msg,
                            duration: 1000
                        });
                    }
                    NProgress.done();
                    this.listLoading = false
                });
            },
            handleSome(index, row) {  //同步
                this.dialogFormVisibleEdit = true
                this.editForm.orderId = row.orderId;
                this.editForm.acceptMobile = row.acceptMobile;
                this.editForm.acceptName = row.acceptName;
                this.editForm.address = row.address;
                this.editForm.logisticsNumber = row.logisticsNumber;
                this.editForm.logisticsCompany = row.logisticsCompany;
            },
            submitEditGoods(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const param = {
                            orderId: this.editForm.orderId,
                            acceptMobile: this.editForm.acceptMobile,
                            acceptName: this.editForm.acceptName,
                            address: this.editForm.address,
                            logisticsNumber: this.editForm.logisticsNumber,
                            logisticsCompany: this.editForm.logisticsCompany,
                        };
                        updateOrder(param).then((res) => {
                            if (res.data.code === 0) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功',
                                    duration: 1000
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg,
                                    duration: 2000
                                })
                            }
                            this.getList();
                            this.dialogFormVisibleEdit = false
                        })
                    } else {
                        return false;
                    }
                });
            },
            orderIn(e) {  //导入
                const formData = new FormData()
                formData.append('file', e.file)
                const rLoading = this.openLoading()
                orderInExcel(formData).then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '订单导入成功',
                            duration: 1000
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg,
                            showClose: true,
                            duration: 0
                        })
                    }
                    rLoading.close();
                    this.getList()
                })
            },
            orderOut() {  //导出
                const param = {
                    mobile: this.filters.mobile,
                    orderId: this.filters.orderId,
                    logisticsNumber: this.filters.logisticsNumber,
                    subOrderId: this.filters.subOrderId,
                    acceptName: this.filters.acceptName,
                    detailedAddressLength: this.filters.detailedAddressLength,
                    consignmentStatus: this.filters.orderDealStatus,
                    startTime: this.filters.startTime,
                    endTime: this.filters.endTime,

                };
                unOrderOut(param).then((res) => {
                    const fileName = '未核销订单';
                    const link = document.createElement('a')
                    const tourl = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}))
                    link.href = tourl
                    link.target = '_blank'
                    link.download = fileName
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                })
            },
            closeDialog(formName) { // 关闭弹框
                this.dialogFormVisibleGoods = false;
                this.$refs[formName].resetFields()
            },
            handleOrderIconClick() {
                this.filters.orderId = ''
            },
            // 分页
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getList()
            },
            // 分页显示条数
            handleSizeChange(val) {
                this.size = val;
                this.getList()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
